<template>
    <div class="setpos-wrap">
        <SearchBar></SearchBar>
        <div class="gps" @click="geolocation">
            <span>定位到当前位置</span>
        </div>
        <Modal :visible="visible">
            <ul>
                <li v-for="(item,index) in tipList" :key="index" @click="setAddress(item)">
                    <h4>{{item.name}}</h4>
                    <span>{{item.address}}</span>
                </li>
            </ul>
        </Modal>
    </div>
</template>

<script>
import SearchBar from './component/searchBar';
import Modal from '@/components/modal';
import {getGeolocation} from '@/utils/map';
export default {
    data(){
        return {
            visible:false,
            tipList:[]
        }
    },
    components:{
        SearchBar,
        Modal
    },
    methods:{
        async geolocation(){
            try{
                let result = await getGeolocation({extensions:'all'});
                this.tipList = result.pois;
                this.visible = true;
            }catch(e){
                console.log('定位失败',e);
            }   
        },
        setAddress(item){
            window.localStorage.setItem('positionData',`${item.name}${item.address}`);
            this.$router.push('/main')
        }
    }
}
</script>

<style lang="scss" scoped>
    .setpos-wrap{
        @include size(100%,100%);
        background: #eee;
    }
    .gps{
        width:100%;
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding:0 15px;
        margin-top:10px;
    }
</style>